<script setup lang="tsx">
import { activeDetailsApi, adminActiveDetailsApi } from '@/api/Activity'
import { ActiveStateDict } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})
const activeEnrollInfo = ref('')

const getDetail = async () => {
  const api = userStore.userInfo.roles.includes('商家') ? adminActiveDetailsApi : activeDetailsApi
  const res = await api(props.id)
  detail.value = res.data
  activeEnrollInfo.value = detail.value.activeEnrollInfos.map((item) => item.title).join()
}
getDetail()

const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 6) {
    if (rowIndex === 0) {
      return {
        rowspan: detail.value.activeGoods.length,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">活动名称：{{ detail.activeTitle }}</div>
      <div class="flex-[50%] px-5">活动状态：{{ ActiveStateDict[detail.activeState] }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="px-5">
        <ElImage
          :src="detail.activeImg"
          fit="cover"
          class="w-15"
          lazy
          :preview-src-list="[detail.activeImg]"
          preview-teleported
        />
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">活动编号：{{ detail.activeNo }}</div>
      <div class="flex-[50%] px-5">活动商家：{{ detail.businessShortName }}</div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>活动起止时间：</span>
        <span v-if="detail.startTime">{{ detail.startTime }}至<br />{{ detail.endTime }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>活动有效时间：</span>
        <span v-if="detail.validStartTime">
          {{ detail.validStartTime }}至<br />{{ detail.validEndTime }}
        </span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>活动价格：</span>
        <span>{{ detail.activePrice }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>划线价格：</span>
        <span>{{ detail.originPrice }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex flex-[50%] px-5">
        <span>活动库存：</span>
        <span>剩余{{ detail.remainStock }}/总{{ detail.totalStock }}</span>
      </div>
      <div class="flex flex-[50%] px-5">
        <span>限购数量：</span>
        <span>{{ detail.limitBuyNum === 0 ? '不限制' : detail.limitBuyNum }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex px-5">
        <span>活动地点：</span>
        <span>{{ detail.address }}</span>
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">
        标签：
        <span class="mr-2" v-for="(tag, index) in detail.labels" :key="index">
          {{ tag.name }}
        </span>
      </div>
      <div class="flex-[50%] px-5">
        部分核销不退款：{{ detail.refundableExpiredUnused ? '开启' : '关闭' }}
      </div>
    </div>
    <div class="flex text-14px py-2">
      <div class="flex-[50%] px-5">是否公域展示：{{ detail.hideLink ? '否' : '是' }}</div>
      <div class="flex-[50%] px-5">创建时间：{{ detail.createTime }}</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">商品信息</div>
    <div class="flex text-14px py-2">
      <el-table
        :data="detail.activeGoods"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsPrice" label="商品价格" />
        <el-table-column prop="goodsNum" label="商品数量" />
        <el-table-column
          v-if="!userStore.userInfo.roles.includes('商家')"
          prop="merchantName"
          label="所属商户"
        />
        <el-table-column prop="subsidyAmt" label="补贴金额" />
        <el-table-column label="商品总价">{{ detail.totalPrice }}</el-table-column>
      </el-table>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">报名设置</div>
    <template v-if="detail.enrollEnable">
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">
          报名价格：
          <span v-if="detail.stepPriceState === 1">{{ detail.activePrice }}</span>
          <div v-else>
            <div v-for="(item, index) in detail.activeStepPrices" :key="index">
              阶梯{{ index + 1 }}：{{ item.enrollNum }}人 {{ item.enrollPrice }}元
            </div>
          </div>
        </div>
        <div class="flex-[50%] px-5">
          核销方式：{{ detail.verifyMethod === 1 ? '线上核销' : '线下核销' }}
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">
          未满员自动退：{{ detail.noFullAutoRefundState === 1 ? '是' : '否' }}
        </div>
        <div class="flex-[50%] px-5">
          是否签到：{{ detail.signInRequired ? '是' : '否' }}
          <span v-if="detail.signInFee">(签到费:{{ detail.signInFee }})</span>
        </div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">
          联系信息：{{ detail.activeMobile }}/{{ detail.activeWechat }}
        </div>
        <div class="flex-[50%] px-5">报名信息：{{ activeEnrollInfo }}</div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">已报名人数：{{ detail.enrolledNum }}人</div>
        <div class="flex-[50%] px-5">是否审核：{{ detail.auditRequired ? '是' : '否' }}</div>
      </div>
    </template>
    <div v-else class="flex text-14px py-2">
      <div class="flex-[50%] px-5">无</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">票付通信息</div>
    <template v-if="detail.isPft">
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">供应商ID：{{ detail.pftSupplier }}</div>
        <div class="flex-[50%] px-5">票付通商品ID：{{ detail.pftProduct }}</div>
      </div>
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">票付通门票ID：{{ detail.pftTicket }}</div>
        <div class="flex-[50%] px-5"></div>
      </div>
    </template>
    <div v-else class="flex text-14px py-2">
      <div class="flex-[50%] px-5">无</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">分销设置</div>
    <template v-if="!(detail.defaultCommissionType === 0 && !detail.otherEquity)">
      <div class="flex text-14px py-2">
        <div v-if="detail.defaultCommissionType === 1" class="flex flex-[50%] px-5">
          <span>佣金：</span>
          <span>{{ detail.commissionAmt }}</span>
        </div>
        <div v-if="detail.defaultCommissionType === 2" class="flex flex-[50%] px-5">
          <span>佣金比例：</span>
          <span>{{ detail.commissionRate }}%</span>
        </div>
        <div v-if="detail.defaultCommissionType === 0" class="flex flex-[50%] px-5">
          <span>其他：</span>
          <span>{{ detail.otherEquity }}</span>
        </div>
      </div>
    </template>
    <div v-else class="flex text-14px py-2">
      <div class="flex-[50%] px-5">无</div>
    </div>
  </div>
  <div>
    <div class="font-bold py-2">营销设置</div>
    <template v-if="detail.activeRedPacket">
      <div class="flex text-14px py-2">
        <div class="flex-[50%] px-5">
          新人首单红包：{{ detail.activeRedPacket?.firstRedPacketAmt }}元、
          {{ detail.activeRedPacket?.redPacketNum }}个、有效期
          {{ detail.activeRedPacket?.validDay }}天
        </div>
        <div class="flex-[50%] px-5">已使用红包：{{ detail.activeRedPacket?.useNum }}</div>
      </div>
      <div class="flex text-14px py-2">
        多件多折：
        <span v-for="(item, index) in detail.activeDiscount" :key="index">
          满{{ item.num }}件 {{ item.discount }}折、
        </span>
      </div>
    </template>
    <div v-else class="flex text-14px py-2">
      <div class="flex-[50%] px-5">无</div>
    </div>
  </div>
</template>
